<script setup>
import { ref,reactive } from 'vue'
import {solveWeChatMath, solveHtml, copySafari} from "../utils/converter";
import {PREVIEW_CLASS} from "../utils/constant";

import { mdtext } from '../assets/mock/mdtext';

import Theme from './theme.vue';


const text = ref(mdtext)
const themeRef = ref(null);

// 复制到微信 按钮点击事件
const coptWxClick = () =>{
  // console.log('复制到微信') 
  solveWeChatMath();
  let html2 = solveHtml();
  copySafari(html2); 
}

// 选择主题 弹框
const themesClick = () =>{
  // console.log('选择主题')
  themeRef.value.show();
}
// 使用主题
const useCallback = (cssStyle,index) =>{

  let preClass = document.getElementsByClassName(PREVIEW_CLASS)[0];
  let niceId = preClass.innerHTML.includes('nice');
  let html = preClass.innerHTML;
  let html1 = '';
  console.log('niceId = ',niceId)
  if (niceId) {
    console.log(1)
    html1 = html;
  } else {
    console.log(2)
    html1 =  '<section id="nice" >' + html + '</section>'
  }
  preClass.innerHTML = html1;

  let myStyle = document.getElementById('myStyleId');
  if (myStyle) {
    myStyle.innerHTML = cssStyle;
  } else {
    let style = document.createElement('style');
    style.setAttribute('type','text/css');
    style.setAttribute('id','myStyleId');
    style.innerHTML = cssStyle;
    document.head.appendChild(style);
  }
  // coptWxClick(cssStyle);
}

const mdChange = (text, html) =>{
  // console.log('html = ',html)
}

</script>

<template>

  <el-container>
    <el-main>
      <v-md-editor 
        v-model="text" 
        height="100%"
        left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code"
        @change="mdChange"
        ></v-md-editor>
    </el-main>
    <el-aside width="40px">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="复制到微信"
        placement="left"
      >
        <img class="btt" src="../assets/images/weixingongzhonghao.png" @click="coptWxClick" />
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="主题"
        placement="left"
      >
        <img src="../assets/images/zhuti.png" @click="themesClick" />
      </el-tooltip>
    </el-aside>
  </el-container>
  <Theme ref="themeRef" @use="useCallback" />
</template>

<style scoped lang="less">
.el-container{
  .el-main{
    padding: 0;
  }
  .el-aside{
    text-align: center;
    padding-top: 60px;
    border-left: 1px solid #ddd;
    img{
      width: 24px;
      height: 24px;
      padding: 10px 0;
      cursor: pointer;
    }
    .btt{
      border-bottom: 1px solid #ddd;
    }
  }
}
</style>
